<template>
    <div className="bottom">
        <div className="top">jjjjj</div>
        <div className="side-container">
            <div className="left">ddddwwf</div>
            <div className="right">dddd</div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Administrators',
    data() {
        return {};
    },
};
</script>

<style scoped>
.bottom {
    display: flex;
    flex-direction: column;
    background-color: #45a049;
    height: 200px;
}

.top, .left, .right {
    border: 1px solid #ccc;
    padding: 10px;

}

.top {
    position: fixed;
    top: 0;
    width: 100%; /* 让顶部栏充满整个宽度 */
}

.side-container {
    display: flex;
    height: 900px;
    background-color: #45a049;

}

.left, .right {
    flex: 1;
    margin-top: 20px; /* 避免内容被顶部栏遮挡 */
}
</style>
